<template>
  <div class="header">
    <div class="nav_bg">
      <div class="nav max_width">
        <div class="nav_list">
          <div class="logo">
            <img src="../assets/header/logo.png"/>
          </div>
          <div class="nav_option">
            <div v-for="(item, index) in Nav_list" :key="index" :class="{ addclass_nav: index == Nav_id }" class="nav_option_s" @click="Nav_change(index)">
              {{ item.title }}
              <!-- 点击添加白线 -->
              <div v-show="index == Nav_id" class="nav_add_border"></div>
            </div>
          </div>
        </div>
        <div class="Personal_Center">
          <div class="per_div">
            <div>个人中心</div>
            <div>消息</div>
          </div>
          <div class="sign">
            <div>登录</div>
            <div>注册</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Header',
  data() {
    return {
      // 导航选项列表
      Nav_list: [
        { title: '首页', path: `/?get=${0}` },
        { title: '实例', path: `/Example?get=${1}` },
        { title: '素材库', path: `/Materlibrary?get=${2}` },
        { title: '问答', path: `/Problem?get=${3}` }
      ],
      // 导航点击样式控制
      Nav_id: 0
    }
  },
  methods: {
    // 导航路由跳转
    Nav_change(index) {
      this.$router.push({ path: this.Nav_list[index].path }).catch(() => {
      })
      // 添加样式
      this.Nav_id = index
    }
  },
  created() {
    this.Nav_id = localStorage.getItem('get')
  }
}
</script>
<style lang="scss" scoped>
.show_div {
  visibility: hidden;
}

.header {
  width: 100%;
  // position: relative;
  // background: url("../assets/header/banner.png") no-repeat;
  // height: 443px;
  // 导航背景颜色
  .nav_bg {
    width: 100%;
    height: 92px;
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    position: fixed;
    top: 0;
    z-index: 999;
  }

  // 导航
  .nav {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav_list {
      width: 480px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .logo {
        width: 46px;
        height: 52px;
      }

      .nav_option {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav_option_s {
          text-align: center;
          font-size: 19px;
          color: white;
          line-height: 92px;
          width: 100px;
          position: relative;
          cursor: pointer;
        }

        .nav_option_s:hover {
          font-size: 21px;
          font-weight: bold;
        }

        .nav_option_s::before {
          content: "";
          width: 42px;
          height: 0px;
          background: white;
          border-radius: 2px;
          position: absolute;
          bottom: 22px;
          left: 50%;
          transform: translate(-50%);
        }

        .nav_add_border {
          width: 42px;
          height: 6px;
          background: white;
          border-radius: 2px;
          position: absolute;
          bottom: 22px;
          left: 50%;
          transform: translate(-50%);
        }

        .nav_option_s:hover::before {
          height: 6px;
          transition: height 0.3s;
        }

        // 添加class
        .addclass_nav {
          font-size: 21px;
          font-weight: bold;
        }
      }
    }
  }

  // 个人中心
  .Personal_Center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 280px;

    div {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .per_div {
      width: 138px;
      color: white;
      font-size: 19px;

      div {
        cursor: pointer;
      }
    }

    .sign {
      color: white;
      font-size: 16px;
      width: 83px;

      div {
        cursor: pointer;
      }
    }
  }
}
</style>
